<script setup>
    import {ref} from 'vue'
    import {ElMessage, ElMessageBox} from "element-plus";
    import axios from "axios";
    import qs from "qs";

    const input = ref('')
    const tableData = ref([])
    function getAll(){
      axios({
        method:"get",
        url:"http://localhost:8080/admin/goodtypelist"
      }).then((response)=>{
        tableData.value=response.data
      }).catch((error)=>{
        console.log(error);
      })
    }
    getAll();

    function addSorts(){
        dialogVisible.value=true
        form.value={
            gtid:'',
            gtname:'',
        }
    }

    //添加分类
    let dialogVisible=ref(false)
    let form=ref({
      gtid:'',
      gtname:'',
    })

    function addSort(){
      dialogVisible.value=false;
      axios({
        url:"http://localhost:8080/admin/addGoodType",
        method:"post",
        data:form.value
      }).then((response)=>{
        if(response.data===1){
          // suceess
          getAll();
          ElMessage({
            type: 'success',
            message: '添加成功',
            showClose: true
          });
        }else{
          // error
          ElMessage({
            type: 'error',
            message: '添加失败',
            showClose: true

          });
        }
      })
    }

    //删除分类
    function deleteSort(gtid){
      ElMessageBox.confirm(
          '确定删除该分类吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(()=>{
        //发请求
        axios({
          method: 'post',
          url: 'http://localhost:8080/admin/delGoodType',
            data:{"gtid":gtid},
            transformRequest: [ function(data){
                return qs.stringify(data)  //使用Qs将请求参数序列化
            }],
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'  //必须设置传输方式
            }
        }).then((response)=>{
          if(response.data===1){
            getAll();
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }else{
            //提示，重新请求全部数据

          ElMessage({
            type:'error',
            message: '删除失败',

            })
          }
        })
      }).catch(()=>{
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      })
    }
    //编辑分类
    let dialogEdit=ref(false)
    let formEdit=ref({
      gtid:'',
      gtname:'',
    })


    //获取一条数据
    function getOneSort(gtid){
      dialogEdit.value=true;
      alert(gtid),
      axios({
        method:"post",
        url:`http://localhost:8080/admin/upGoodType`,
        data:{"gtid":gtid},
        transformRequest: [ function(data){
          return qs.stringify(data)  //使用Qs将请求参数序列化
        }],
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'  //必须设置传输方式
        }

      }).then((response)=>{
        formEdit.value=response.data;
      }).catch((error) => {
        console.error('请求失败:', error);
        ElMessage.error('请求失败');
      });
    }
    //修改
    function upSort(){
      dialogEdit.value=false;
      axios({
        url:"http://localhost:8080/admin/updateGoodType",
        method:"post",
        data:formEdit.value,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 设置正确的请求头
        }
      }).then((response)=>{
        if(response.data===1){
          getAll();
              ElMessage({
                message: '修改成功',
                type: 'success',
                showClose: true,

              })
        }else{
              ElMessage({
                message: '修改失败',
                type: 'error',
                showClose: true,

              })
        }
      })
    }

</script>

<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="max-width: 100%">

        <el-row>
          <el-col :span="4">
            <el-button type="primary"  @click="addSorts()">
              <el-icon><CirclePlus /></el-icon>添加分类
            </el-button>
          </el-col>
          <el-divider />
          </el-row>


            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 840px">
                <el-table-column prop="gtid" label="分类序号" width="200" align="center" />
                <el-table-column prop="gtname" label="分类名称" width="200" align="center" />
                <el-table-column label="操作" min-width="120" width="200" align="center">
                    <template #default="scope">
                        <el-tooltip effect="dark" content="删除">
                            <el-button text type="danger" @click="deleteSort(scope.row.gtid)">
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑">
                            <el-button text type="primary" @click="getOneSort(scope.row.gtid)">
                                <el-icon><Edit /></el-icon>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

<!--   添加商品分类的布局   -->
      <div>
      <el-dialog v-model="dialogVisible" title="添加商品分类" width="750">
        <el-form :model="form" style="max-width: 700px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品分类">
                <el-input v-model="form.gtname" placeholder="请填写商品类别"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addSort">确定</el-button>
        </div>
      </template>
      </el-dialog>
      </div>

      <!--   修改商品分类的布局   -->
      <div>
        <el-dialog v-model="dialogEdit" title="修改分类" width="550">
          <el-form :model="formEdit" style="max-width: 700px;">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商品分类">
                  <el-input v-model="formEdit.gtname" placeholder="请填写商品类别"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogEdit = false">取消</el-button>
              <el-button type="primary" @click="upSort">确定</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
</template>


<style scoped>
    .el-breadcrumb {
        margin-bottom: 20px;
    }
    .searchbtn{
        float: right;
    }

    .icon-search{
        margin-right: 10px;
    }
    .icon-CirclePlus{
      margin-right: 10px;
    }
    .el-table{
        margin-top: 20px;
    }
</style>
